{extend name="common/default" /}
{block name="style"}
<style>
    img {
        max-width: 100%;
    }
    .question_box{
        display: flex;
        flex-flow: row wrap;
        align-content: flex-start;
    }
    .question_one{
        box-sizing: border-box;
        background-color: #9c9c9c;
        flex: 0 0 20%;
        height: 58px;
        border: 1px solid white;
        text-align: center;
        line-height: 58px;
        font-size: 24px;
        color: #fff;
    }
    .question_one.done{
        background-color: #07c160;
    }

    .answer_one{
        padding: 16px;
    }
    .answer_one .title{
        text-align: left;
    }
    .button-sp-area{
        display: flex;
        justify-content: space-between;
        padding: 0 16px;
    }
    .button-sp-area .weui-btn{
        margin: 0 !important;
    }
    .weui-cells__title{
        text-align: left;
    }
    .end_question{
        display: none;
    }
    #spanOne{
        padding:0 16px;
        color: #fe4c02;
        font-weight: bolder;
        text-shadow: 2px 1px 2px #222222;
    }
    #spanAll,#spanAllTwo{
        padding:0 16px;
        color: #fe4c02;
        font-weight: bolder;
        text-shadow: 2px 1px 2px #222222;
    }
    #spanAllTwo{
        position: absolute;
        bottom: 16px;
        width: 100%;
        text-align: center;
        padding: 0;
    }
    .page__bd{
        overflow: scroll;
    }
    .page__ft{
        padding-top: 16px;
        background: #fff;
    }
    .answer_box{
        padding-bottom: 100px;
    }
    /*2021.03.26 修复过长的题目内容导致页面样式错乱*/
    .container{
        position: relative;
        min-height: 100%;
    }
    .page__ft.j_bottom{
        position: fixed;
    }
</style>
{/block}
{block name="container"}
<div class="container">
    <div class="page" id="page_rexam">
        <div class="page__hd">
            <h1 class="page__title">{$one.name}</h1>
            <p class="page__desc">{$one.content}</p>
        </div>
        <div class="page__bd page__bd_spacing">
            <div class="question_box">
                {foreach name="question" key="key" item="vo"}
                <div class="question_one {$answer_one[$vo]['css']|default=''}" data-key="{$key+1}" data-qid="{$vo}" id="questionOne{$vo}">
                    <input type="hidden" name="question{$vo}" value="{$answer_one[$vo]['value']|default=''}"  id="question{$vo}"/>
                    {$key+1}
                </div>
                {/foreach}
            </div>
        </div>
        <div class="page__ft">
            <h2><span id="total">0</span>/<span>{$answer.question_count}</span></h2>
            <a href="javascript:" class="weui-btn weui-btn_primary fin_question">提交</a>
        </div>
        <div id="spanAllTwo"></div>
        <div id="js_toast" style="display: none;">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast">
                <i class="weui-icon-success-no-circle weui-icon_toast"></i>
                <p class="weui-toast__content">已提交</p>
            </div>
        </div>
    </div>
    <div class="page js_show" id="page_answer">
        <div class="page__bd page__bd_spacing" style="text-align: center;">
            <p>&nbsp;</p>
            <div class="weui-slider-box">
                <div id="slider" class="weui-slider">
                    <div class="weui-slider__inner">
                        <div id="sliderTrack" style="width: 0%;" class="weui-slider__track"></div>
                        <div id="sliderHandler"  style="left: 0%;" class="weui-slider__handler"></div>
                    </div>
                </div>
                <div id="sliderValue" class="weui-slider-box__value"><span id="currentStep">1</span>/<span>{$answer.question_count}</span></div>
            </div>
            <div class="answer_box" id="answerBox"></div>
        </div>
        <div class="page__ft j_bottom" style="background: #eeeeee;">
            <div class="button-sp-area">
                <a href="javascript:" class="weui-btn weui-btn_mini weui-btn_primary pre_question">上一题</a>
                <div><span id="spanOne"></span><span id="spanAll"></span></div>
                <a href="javascript:" class="weui-btn weui-btn_mini weui-btn_primary end_question">完成</a>
                <a href="javascript:" class="weui-btn weui-btn_mini weui-btn_primary nxt_question">下一题</a>
            </div>
        </div>
    </div>
    <audio id="audioClock" src="__ADDON__/clock.wav"></audio>
</div>
{/block}
{block name="javascript"}
<script src="__ADDON__/jquery.tmpl.js"></script>
<script src="__ADDON__/jquerysession.js"></script>
<script id="tplOne" type="text/html">
    <div class="answer_one">
        <h2 class="title">${title}</h2>
        <p>{{html content}}</p>
    </div>
    <div class="weui-cells__title">单选题</div>
    <div class="weui-cells weui-cells_radio">
        {{each(i,v) options_json}}
        <label class="weui-cell weui-check__label" for="r${i}">
            <div class="weui-cell__bd">${v.value}</div>
            <div class="weui-cell__ft">
                <input required type="radio" class="weui-check" name="answer${id}" value="${v.key}" id="r${i}" data-qid="${id}">
                <span class="weui-icon-checked"></span>
            </div>
        </label>
        {{/each}}
    </div>
</script>
<script id="tplTwo" type="text/html">
    <div class="answer_one">
        <h2 class="title">${title}</h2>
        <p>{{html content}}</p>
    </div>
    <div class="weui-cells__title">多选题</div>
    <div class="weui-cells weui-cells_radio">
        {{each(i,v) options_json}}
        <label class="weui-cell weui-check__label" for="r${i}">
            <div class="weui-cell__bd">${v.value}</div>
            <div class="weui-cell__ft">
                <input type="checkbox" class="weui-check" name="answer${id}" value="${v.key}" id="r${i}" data-qid="${id}">
                <i class="weui-icon-checked"></i>
            </div>
        </label>
        {{/each}}
    </div>
</script>
<script id="tplThr" type="text/html">
    <div class="answer_one">
        <h2 class="title">${title}</h2>
        <p>{{html content}}</p>
    </div>
    <div class="weui-cells__title">判断题</div>
    <div class="weui-cells weui-cells_radio">
        <label class="weui-cell weui-check__label" for="r0">
            <div class="weui-cell__bd">错误</div>
            <div class="weui-cell__ft">
                <input type="radio" class="weui-check" name="answer${id}" value="0" id="r0" data-qid="${id}">
                <i class="weui-icon-checked"></i>
            </div>
        </label>
        <label class="weui-cell weui-check__label" for="r1">
            <div class="weui-cell__bd">正确</div>
            <div class="weui-cell__ft">
                <input type="radio" class="weui-check" name="answer${id}" value="1" id="r1" data-qid="${id}">
                <i class="weui-icon-checked"></i>
            </div>
        </label>
    </div>
</script>

<script type="text/javascript">
    var qall = {$answer.question_count};      //题目总量
    var step = 100/qall;                      //答题进度
    var qnum = 1;                        //当前答题序号
    var total = 0;                            //已答题数

    var limitdata = {$one.limitdata};        //是否限时
    var limitone = {$one.limitone};          //单题限时
    var limitall = {$one.limitall};          //总限时

    var timerone = null;                     //单题定时器
    var timerall = null;                     //总定时器

    var countone = 0;                         //单题倒计时
    var countall = 0;                         //总倒计时

    function slider_fresh(){
        var wide = qnum*step;
        $("#sliderTrack").css("width",wide+'%');
        $("#sliderHandler").css("left",wide+'%');
        $("#currentStep").html(qnum);
    }

    function btn_fresh(){
        if(qnum==1){
            $(".nxt_question").removeClass("weui-btn_disabled");
            $(".pre_question").addClass("weui-btn_disabled");
        }else if(qnum==qall){
            $(".pre_question").removeClass("weui-btn_disabled");
            $(".nxt_question").addClass("weui-btn_disabled");
        }else{
            $(".pre_question").removeClass("weui-btn_disabled");
            $(".nxt_question").removeClass("weui-btn_disabled");
        }

        if(qnum==qall){
            $(".nxt_question").hide();
            $(".end_question").show();
        }else{
            $(".nxt_question").show();
            $(".end_question").hide();
        }

        if(limitdata==1 && limitone>0){
            $(".pre_question").hide();
        }
    }

    function total_fresh(){
        total = 0;
        $('.question_one').each(function(){
            if($(this).hasClass('done')){
                total++;
            }
        })
        $("#total").html(total);
    }

    function load(){
        save();
        if(qnum == 0){
            $("#page_answer").removeClass('js_show');
            $("#page_rexam").addClass('js_show');
            $("#page_answer").hide();
            $("#page_rexam").show();
            total_fresh();
            if(timerone!== null){
                clearInterval(timerone);
            }
            return false;
        }else{
            $("#page_rexam").removeClass('js_show');
            $("#page_answer").addClass('js_show');
            $("#page_rexam").hide();
            $("#page_answer").show();
        }
        $.ajax({
            type: 'POST',
            url: "{:addon_url('rexam/answer/question')}",
            data: {
                'qnum':qnum,
                'rid':"{$answer.rexam_id}",
            },
            dataType: 'json',
            success: function (res) {
                if (res.code == 1) {
                    btn_fresh();
                    var question = res.data.question;
                    $( "#answerBox" ).empty();
                    switch(question['typedata']){
                        case '1'://单选
                            $( "#tplOne" ).tmpl( question ).appendTo( "#answerBox" );
                            if($('#questionOne'+question['id']).hasClass('done')){
                                $('#answerBox input[type="radio"]').each(function(){
                                    if($(this).val() == $('#question'+question['id']).val()){
                                        $(this).attr('checked', 'checked');
                                    }
                                })
                            }
                            $('#answerBox input[type="radio"]').change(function(){
                                $('#questionOne'+$(this).data('qid')).addClass('done');
                                $('#question'+$(this).data('qid')).val(this.value);
                            })
                            break;
                        case '2'://多选
                            $( "#tplTwo" ).tmpl( question ).appendTo( "#answerBox" );
                            if($('#questionOne'+question['id']).hasClass('done')){
                                var ans = $('#question'+question['id']).val().split(',');
                                $('#answerBox input[type="checkbox"]').each(function(){
                                    if($.inArray($(this).val(), ans) >= 0){
                                        $(this).attr('checked', 'checked');
                                    }
                                })
                            }
                            $('#answerBox input[type="checkbox"]').change(function(){
                                $('#questionOne'+$(this).data('qid')).addClass('done');
                                var ans = [];
                                $('#answerBox input[type="checkbox"]').each(function(){
                                    if($(this)[0].checked){
                                        ans.push($(this).val());
                                    }
                                })
                                $('#question'+$(this).data('qid')).val(ans.join(','));
                            })
                            break;
                        case '3'://判断
                            $( "#tplThr" ).tmpl( question ).appendTo( "#answerBox" );
                            if($('#questionOne'+question['id']).hasClass('done')){
                                $('#answerBox input[type="radio"]').each(function(){
                                    if($(this).val() == $('#question'+question['id']).val()){
                                        $(this).attr('checked', 'checked');
                                    }
                                })
                            }
                            $('#answerBox input[type="radio"]').change(function(){
                                $('#questionOne'+$(this).data('qid')).addClass('done');
                                $('#question'+$(this).data('qid')).val(this.value);
                            })
                            break;
                    }

                    if(limitdata == 1){
                        limit_fresh(res.data.limit);
                    }
                }
            }
        })
    }

    function limit_fresh(limit){
        if(limitone>0){
            if(timerone!== null){
                clearInterval(timerone);
            }
            countone = limit['onecount'];
            timerone = setInterval(function(){
                countone--;
                if(countone<=0){
                    countone=0;
                }
                $("#spanOne").html(countone+'s');
                if(countone==3){
                    $('#audioClock')[0].play();
                }
                if(countone<=0){
                    clearInterval(timerone);
                    if(qnum<qall){
                        qnum++;
                        load();
                        slider_fresh();
                    }else if(qnum==qall){
                        qnum = 0;
                        load();
                    }
                }
            },1000);
        }

        if(limitall>0){
            if(timerall!== null){
                clearInterval(timerall);
            }
            countall = limit['allcount'];
            timerall = setInterval(function(){
                countall--;
                if(countall<=0){
                    countall=0;
                }
                $("#spanAll").html(countall+'s');
                $("#spanAllTwo").html(countall+'s');
                if(countall==3){
                    $('#audioClock')[0].play();
                }
                if(countall<=0){
                    clearInterval(timerall);
                    submit();
                }
            },1000);
        }
    }

    function save(){
        $.session.set('qnum', qnum);

        var $input = $('input[type="hidden"]');
        var data = {'aid':"{$answer.id}", 'save':1};
        $input.each(function(){
            eval("data." + $(this).attr('name') + "='"+$(this).val()+"'");
        });

        $.ajax({
            type: 'POST',
            url: "{:addon_url('rexam/answer/answer')}",
            data: data,
            dataType: 'json',
            success: function (res) {
                console.log(res);
            }
        })
    }

    function submit(){
        $.session.remove('qnum');

        var $toast = $('#js_toast');
        var $input = $('input[type="hidden"]');
        var data = {'aid':"{$answer.id}"};
        $input.each(function(){
            eval("data." + $(this).attr('name') + "='"+$(this).val()+"'");
        });
        console.log(data);
        $.ajax({
            type: 'POST',
            url: "{:addon_url('rexam/answer/answer')}",
            data: data,
            dataType: 'json',
            success: function (res) {
                console.log(res);
                if (res.code == 1) {
                    $('.page.cell').removeClass('slideIn');

                    $toast.fadeIn(100);
                    setTimeout(function () {
                        $toast.fadeOut(100);
                        window.location.href = "{$url}";
                    }, 2000);
                }
            }
        })
    }

    $(function () {
        var session_qnum = $.session.get('qnum');
        if(session_qnum != null){
            qnum = session_qnum;
        }
        console.log('qnum',qnum);

        weui.slider('#slider', {
            step: step,
            defaultValue: step*qnum,
            onChange: function(percent){
                if(limitdata==0 || limitone==0){
                    qnum = Math.round(percent/step);
                }
                load();
                slider_fresh();
            }
        });

        $(".question_one").click(function(){
            if(limitdata==1 && limitone>0)return false;
            qnum = $(this).data('key');
            load();
            slider_fresh();
        })

        $(".pre_question").click(function(){
            if($(this).hasClass('weui-btn_disabled'))return false;
            qnum--;
            load();
            slider_fresh();
        })
        $(".nxt_question").click(function(){
            if($(this).hasClass('weui-btn_disabled'))return false;
            qnum++;
            load();
            slider_fresh();
        })
        $(".end_question").click(function(){
            qnum = 0;
            load();
        })
        $(".fin_question").click(function(){
            var msg = '';
            var qb = Math.floor(qall-total);
            console.log(qb);
            if(qb > 0){
                msg = '有'+qb+'道题未做，确定提交吗？';
            }else{
                msg = '已完成答题，确定提交吗？';
            }
            weui.confirm(
                    msg,
                    function(){
                        submit();
                    },
                    function(){
                        console.log('no')
                    }
            );
        })

        load();
        slider_fresh();
    });
</script>
{/block}
